<div ng-init="init();" class="kmi-layout-content C14-content">
    <div class="kmi-header-row">
        <div class="kmi-side-btn left" ng-click="back();">
            <i class="material-icons">&#xE408;</i>
            <div class="kmi-can-click"></div>
        </div>
        <div class="brand-title">
            <div class="custom" ng-if="companyName">
                <div class="title" ng-bind="companyName"></div>
                <img src="" alt="" class="brand">
                <div class="gap"></div>
            </div>
            <div class="digiwin">
                <img src="image/smes_v340/logo_ch.png" alt="">
                <img src="image/smes_v340/logo_en.png" alt="">
            </div>
        </div>
        <div class="header-title" ng-bind="'C14.menutitle' | translate"></div>
        <div class="header-logo"></div>
    </div>
    <div class="kmi-layout-main-content">
        <div class="kmi-text-fields">
            <label class="label" ng-bind="'C14.monitering_period' | translate"></label>
            <div class="switch-content">
                <div class="kmi-button switch-button" ng-class="{'is-selected':queryMode == 2}">
                    <label ng-bind="'C14.week' | translate"></label>
                    <div class="kmi-can-click" ng-click="clickQueryMode(2);"></div>
                </div>
                <div class="kmi-button switch-button" ng-class="{'is-selected':queryMode == 1}">
                    <label ng-bind="'C14.month' | translate"></label>
                    <div class="kmi-can-click" ng-click="clickQueryMode(1);"></div>
                </div>
            </div>
        </div>
        <div class="section">
            <div class="section-title">
                <lablel ng-bind="'C14.produce_process' | translate"></lablel>
            </div>
            <div class="process-content">
                <div class="process-item" ng-repeat="item in item_list track by $index"  ng-class="{'is-selected':now_process.section_process_no == item.section_process_no}"
                    ng-click="clickProcessItem(item);">
                    <div class="process-item__name" ng-bind="item.section_process_name"></div>
                    <div class="process-item__arrow"></div>
                </div>
            </div>
        </div>
        <div class="kmi-layout-page">
            <div class="left-content">
                <div class="flow-content">
                    <div class="flow-item" ng-repeat="item in op_flow_list" ng-class="{'is-selected':now_flow_op.section_no == item.section_no}">
                        <div class="flow-item__content">
                            <div class="flow-item__name" ng-bind="item.section_name" ng-click="clickFlowItem(item);"></div>
                            <div class="flow-item__arrow">
                                 <i class="material-icons" ng-hide="$last">&#xE5DB;</i>
                            </div>
                        </div>
                        <div class="point-content">
                            <div class="point-row">
                                <div class="point-column" ng-class="{'up':item.wip_pointer == 2, 'down':item.wip_pointer == 1}"
                                    style="border-right: 1px solid #cccccc;">
                                    <div class="column__title" ng-bind="'C14.wip_wastes' | translate"></div>
                                    <div class="column__qty" ng-bind="item.wip"></div>
                                    <div class="column__unit" ng-bind="'(' + item.wip_stand + ')'"></div>
                                    <div class="column__arrow">
                                        <i class="material-icons arrow_down">arrow_downward</i>
                                        <i class="material-icons arrow_up">arrow_upward</i>
                                    </div>
                                    <div class="column__persent" ng-bind="item.wip_proportion"></div>
                                </div>
                                <div class="point-column" ng-class="{'up':item.wait_pointer == 2, 'down':item.wait_pointer == 1}">
                                    <div class="column__title" ng-bind="'C14.delay_wastes' | translate"></div>
                                    <div class="column__qty" ng-bind="item.wait"></div>
                                    <div class="column__unit" ng-bind="'(' + item.wait_stand + ')'"></div>
                                    <div class="column__arrow">
                                        <i class="material-icons arrow_down">arrow_downward</i>
                                        <i class="material-icons arrow_up">arrow_upward</i>
                                    </div>
                                    <div class="column__persent" ng-bind="item.wait_proportion"></div>
                                </div>
                            </div>
                            <div class="point-row" style="border-top: 1px solid #cccccc;">
                                <div class="point-column" ng-class="{'up':item.defect_pointer == 2, 'down':item.defect_pointer == 1}"
                                    style="border-right: 1px solid #cccccc;">
                                    <div class="column__title" ng-bind="'C14.defective_wastes' | translate"></div>
                                    <div class="column__qty" ng-bind="item.defect"></div>
                                    <div class="column__unit" ng-bind="'(' + item.defect_stand + ')'"></div>
                                    <div class="column__arrow">
                                        <i class="material-icons arrow_down">arrow_downward</i>
                                        <i class="material-icons arrow_up">arrow_upward</i>
                                    </div>
                                    <div class="column__persent" ng-bind="item.defect_proportion"></div>
                                </div>
                                <div class="point-column" ng-class="{'up':item.exceed_pointer == 2, 'down':item.exceed_pointer == 1}">
                                    <div class="column__title" ng-bind="'C14.overproduction' | translate"></div>
                                    <div class="column__qty" ng-bind="item.exceed"></div>
                                    <div class="column__unit" ng-bind="'(' + item.exceed_stand + ')'"></div>
                                    <div class="column__arrow">
                                        <i class="material-icons arrow_down">arrow_downward</i>
                                        <i class="material-icons arrow_up">arrow_upward</i>
                                    </div>
                                    <div class="column__persent" ng-bind="item.exceed_proportion"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-content">
                    <div class="section-sub-title" ng-repeat-start="item_collection in item_collections" ng-bind="item_collection.name"
                        ng-class="{'first-section':$first}"></div>
                    <div class="kmi-list none-column-split" ng-repeat-end >
                        <div class="kmi-list__header">
                            <div class="kmi-list__column" style="flex:1;" ng-bind="'C14.op_name' | translate"></div>
                            <div class="kmi-list__column" style="flex:0 0 132px;" ng-bind="'C14.average_output_per_hour' | translate"></div>
                        </div>
                        <div class="kmi-list__row-content">
                        <div class="kmi-list__row" ng-repeat="item in item_collection.item_list track by $index">
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.OPNAME"></div>
                            <div class="kmi-list__column" style="flex:0 0 132px;" ng-bind="item.QTY + '('+item.E_DT+')'"></div>
                        </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</div>
